<template>
  <div id="el_selfEvaluation">
    <!-- header -->
    <magic-header :titleName="titleName" class="header"></magic-header>

    <!-- content -->
    <div class="content" layout="column" layout-align="space-between stretch">
      <div>
        <div class="order-items" v-for="(evaluationItem, index) in evaluationItems" :key="index">
          <!-- 商品信息 -->
          <panel :value="evaluationItem.evalProduct.productDetail" :orderType="evaluationItem.orderType">
            <div slot="desc" class='desc'>
              {{evaluationItem.evalProduct.desc}}
            </div>
            <price slot="price" :value="evaluationItem.evalProduct.price"></price>
          </panel>

          <!-- 商品评价 -->
          <div layout="column" layout-align="center flex-start" class="evaluation-content" v-if="evaluationItem.evalProduct.productDetail && ['0', '2', '9', '10'].indexOf(evaluationItem.orderType)>-1">
            <!-- 商品评分 -->
            <div flex class="content-score">
              商品评分
              <mu-radio disabled v-for="(proScoreItem, proScoreIndex) in evalProductScoreList" :key="proScoreIndex" :label="proScoreItem.title" :nativeValue="proScoreItem.score" v-model="evaluationItem.evalProductScore"  ></mu-radio>
            </div>

            <!-- 文字说明 -->
            <div flex class="content-text">
              <div class="content-wrapper">{{evaluationItem.evalProductDesc}}</div>
              <!-- <textarea disabled type="text" placeholder="来分享您的使用感受吧..." class="content-text-area" v-model="." maxlength="100"></textarea> -->
              <!-- <span class="text-help-block">100字</span> -->
            </div>

            <!-- 图片说明 -->
            <div flex layout layout-wrap="wrap" layout-align="start center" class="content-img-box">
              <!-- view -->
              <div v-for="(item, imageIndex) in evaluationItem.evalProductImage.nativeImages" class="content-img img-container" :key="imageIndex">
                <!-- 图片可点击放大 -->
                <magic-image :bigImage="[removeHost(item)]"></magic-image>
              </div>
            </div>
          </div>
        </div>

        <!-- 店铺评分 -->
        <div layout="column" layout-align="center flex-start" class="evaluation-content service-score">
          <div flex class="content-score">店铺评分</div>
          <div flex class="content-score" v-for="(shopEvaluation, index) in evalShopScores" :key="index">
            {{shopEvaluation.title}}
            <span v-for="(res, startIndex) in shopEvaluation.result" :key="startIndex">
              <i class="iconfont" :class="res?'icon-shixinxing':'icon-kongxinxing'" ></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// components
import magicHeader from "components/magicHeader";
import panel from "components/panel";
import price from "components/price";
import orderButton from "components/order-button";
import magicImage from "components/image/ma_image";
// image
import left from "assets/left-gray.svg";
// service
import QueryOrderReviewService from "services/evaluation/QueryOrderReview";

// 产品评分数据
const EVAL_PRODUCT_SCORE = [
  { score: "5", title: "好评" },
  { score: "3", title: "中评" },
  { score: "1", title: "差评" }
];

// 店铺评分数据
const SERVICE_ATTITUDE = "serviceAttitude";
const SERVICE_SPEED = "serviceSpeed";
const SERVICE_PROFESSIONAL = "professional";
let eval_shop_score = [
  {
    id: SERVICE_ATTITUDE,
    title: "服务态度"
  },
  {
    id: SERVICE_SPEED,
    title: "服务速度"
  },
  {
    id: SERVICE_PROFESSIONAL,
    title: "专业技能"
  }
];

export default {
  name: "el_selfEvaluation_view",
  components: { magicHeader, panel, orderButton, price, magicImage },
  data() {
    return {
      evalProductScoreList: EVAL_PRODUCT_SCORE, // 评分数据
      evaluationItems: [],
      evalShopScores: [],
      reviews: [],
      orderId: null,
      titleName: "我的评价",
      left
    };
  },
  methods: {
    // 为了兼容magic-image组件中对图片地址的addpath处理, 此处追加一个去除host的方法
    removeHost(hostPreUrl) {
      let a = document.createElement("a");
      a.href = hostPreUrl;
      return a.pathname;
    },
    /* 评星操作 */
    starOperate
  },
  beforeRouteEnter(to, from, next) {
    // route next
    next(vm => {
      // 订单id
      vm.orderId = JSON.parse(to.query.orderItem).id;
      // 查询评价信息
      queryOrderReview(vm).then(reviews => {
        // 店铺评分处理
        shopEvalDataInit(vm)
        // 数据处理
        metaDataInit(JSON.parse(to.query.orderItem), reviews, vm);
      });
    });
  }
};

/* 
  view-model 说明
  一份订单中可能有多个商品, 以每个商品为维度做评价操作, 每个维度可以拆分为4个部分
  # evaluationItems > evaluationItem
  1. 商品信息, 作展示          evalProduct
  2. 评价评分                 evalProductScore
  3. 评价描述                 evalProductDesc
  4. 评价配图                 evalProductImage
  # evalShopScores 店铺评分
*/

/**
 * @description 元数据处理(订单详情)
 * @augments orderDetail 原始数据
 */
function metaDataInit(orderDetail, reviews, vm) {
  // 取出订单数据中的待评价数据集合(可能有多个)
  orderDetail.orderItems.forEach((orderItem, index)=>{
    let evaluationItem = {
      evalProduct: productDataInit(orderItem),
      evalProductScore: reviews.length > 0 ? reviews[index].score : "5", // 1-差评 3-中评 5-好评
      evalProductDesc: reviews.length > 0 ? reviews[index].content : "",
      evalProductImage: {
        nativeImages: reviews.length > 0 ? reviews[index].images : []
      },
      orderType: orderDetail.orderType
    };
    vm.evaluationItems.push(evaluationItem);
  })
}

/**
 * @description 产品数据初始化
 * @augments product 产品对象
 */
function productDataInit(orderItem) {
  let evalProduct = {
    productDetail: orderItem.product,
    desc: "",
    price: orderItem.price
  };

  // desc 处理
  if (orderItem.product && orderItem.product.specificationValues) {
    orderItem.product.specificationValues.forEach(item => {
      evalProduct.desc =
        evalProduct.desc + item.specificationData.name + ":" + item.name + " ";
    });
  }
  evalProduct.desc = evalProduct.desc == "" ? orderItem.name : evalProduct.desc;

  return evalProduct;
}

/**
 * @description 数据初始化操作
 * @augments null
 */
function shopEvalDataInit(vm) {
  let shopEvaluationList = [];
  for (let index of new Array(...eval_shop_score)) {
    let shopEvaluationObj = {
      id: index.id,
      title: index.title,
      result: starOperate(index.score - 1),
      score: index.score
    };
    shopEvaluationList.push(shopEvaluationObj);
  }
  vm.evalShopScores = shopEvaluationList;
}

/**
 * @description 评分操作
 * @augments statusArr 关联的评分数据
 * @augments index 点击对应星级的索引
 */
function starOperate(index) {
  // star status
  let statusArr = new Array(
    true,
    true,
    true,
    true,
    true,
    false,
    false,
    false,
    false,
    false
  );
  // start-end 共取5个值, 表示当前的打分状态
  return statusArr.slice(4 - index, 9 - index);
}

/**
 * @description CreateProductReview
 * @augments vm Vue instance
 */
function queryOrderReview(vm) {
  return new Promise(function(resolve) {
    QueryOrderReviewService.bind(vm)({
      orderId: vm.orderId
    },
    res => {
      eval_shop_score.forEach(scoreItem => {
        switch (scoreItem.id) {
          case SERVICE_ATTITUDE:
            scoreItem.score = res.serviceAttitude;
            break;
          case SERVICE_SPEED:
            scoreItem.score = res.serviceSpeed;
            break;
          case SERVICE_PROFESSIONAL:
            scoreItem.score = res.professional;
            break;
          default:
            break;
        }
      });
      resolve(vm.reviews = res.reviews);
    });
  });
}

/**
 * @description 请求参数校验
 * @augments vm Vue Instance
 */
function requestValidate(request, vm) {
  // 默认必传参数都存在, 暂时不做处理
  return true;
}

// function queryOrderDetail(vm) {
//   vm.$.get({
//     "methodName" : "QueryOrderDetail",
//   })
// }
</script>

<style lang="scss">
#el_selfEvaluation {
  height: 100%;
  .content {
    padding-top: 50px;
    height: 100%;
  }
  .header {
    position: fixed;
    z-index: 1;
  }
  .close {
    position: absolute;
    right: -10px;
    top: -5px;
    border: none;
  }
  i {
    color: #ffad00 !important;
  }

  textarea[placeholder] {
    font-size: 14px;
    text-indent: 0px;
  }
  .content-wrapper{
    padding: 5px;
  }
  .evaluation-content {
    margin-top: 8px;
    padding: 18px;
    background-color: #fff;
  }

  .content-score {
    font-size: 16px;
    display: flex;
    align-items: center;
    padding: 5px;
  }

  .content-score img {
    padding-left: 10px;
  }

  .content-text {
    position: relative;
    width: 100%;
  }

  .content-text-area {
    width: 100%;
    min-height: 100px;
    border: 1px solid #7fa9dd;
    padding: 8px;
    margin: 16px 0 8px 0;
    resize: none;
  }

  .text-help-block {
    position: absolute;
    right: 10px;
    bottom: 18px;
    font-size: 14px;
    color: #929292;
  }
  .content-img-box{
    overflow: hidden;
    display: flex;
    // justify-content:space-between;
  }
  .content-img {
    width: 20%;
    padding: 8px 0 3px 0;
    margin-right: 1.33%;
    position: relative;
  }

  .content-img i {
    position: absolute;
    right: -10px;
    top: -5px;
    color: black !important;
    z-index: 2;
    /*background-color: black;*/
  }

  .content-img img {
    border: 1px solid #98bae4;
  }

  .no-margin {
    margin-right: 0;
  }

  .foot-button {
    margin-right: 10px;
    font-weight: 300;
  }

  .img-container {
    width: 80px;
    /*overflow: hidden;*/
    height: 120px;
  }
  .service-score {
    margin: 16px 0 8px 0;
  }
  .service-score .content-score:first-child {
    margin-bottom: 8px;
  }
  .content-score .mu-radio .mu-radio-icon {
    margin: 0px;
  }
  .content-score .mu-radio {
    margin-left: 20px;
  }
  #foot {
    position: initial;
    padding: 5px 0;
  }
  .order-items {
    margin-bottom: 20px;
  }
  .no-height {
    position: absolute;
  }
}
</style>
